<template>
    <div class="new">
        <el-card>
<!--            <div style="margin: 25px 0;width: 100%;display: flex;flex-direction: row;justify-content: space-between">-->
<!--                <div style="display: flex;flex-direction: row;">-->
<!--                    <div>-->
<!--                        <label style="font-size: 16px;font-weight: 600">车库名称:</label>-->
<!--                        <el-select style="width: 150px;margin-left: 5px" value="" clearable>-->
<!--                            <el-option value="1" label="已读"></el-option>-->
<!--                            <el-option value="0" label="未读"></el-option>-->
<!--                        </el-select>-->
<!--                    </div>-->
<!--                    <div style="margin-left: 15px">-->
<!--                        <label style="font-size: 16px;font-weight: 600">用户名称:</label>-->
<!--                        <el-select style="width: 150px;margin-left: 5px" value="" clearable>-->
<!--                            <el-option value="1" label="已读"></el-option>-->
<!--                            <el-option value="0" label="未读"></el-option>-->
<!--                        </el-select>-->
<!--                    </div>-->
<!--                    <div style="margin-left: 15px">-->
<!--                        <label style="font-size: 16px;font-weight: 600">评论内容:</label>-->
<!--                        <el-input style="width: 300px;"></el-input>-->
<!--                    </div>-->
<!--                    <div style="margin-left: 15px">-->
<!--                        <label style="font-size: 16px;font-weight: 600">时间段:</label>-->
<!--                        <el-date-picker-->
<!--                                v-model="value2"-->
<!--                                type="daterange"-->
<!--                                align="right"-->
<!--                                unlink-panels-->
<!--                                range-separator="至"-->
<!--                                start-placeholder="开始日期"-->
<!--                                end-placeholder="结束日期"-->
<!--                                :picker-options="pickerOptions">-->
<!--                        </el-date-picker>-->
<!--                    </div>-->

<!--                </div>-->
<!--                <div>-->
<!--                    <el-tooltip class="item" effect="dark" content="回复" placement="top">-->
<!--                        <el-button type="success" @click="replayComment" circle icon="el-icon-microphone"></el-button>-->
<!--                    </el-tooltip>-->
<!--                    <el-tooltip class="item" effect="dark" content="新增" placement="top">-->
<!--                        <el-button type="primary" @click="addComment" circle icon="el-icon-plus"></el-button>-->
<!--                    </el-tooltip>-->
<!--                    <el-tooltip class="item" effect="dark" content="删除" placement="top">-->
<!--                        <el-button type="danger" @click="deleteComment" circle icon="el-icon-delete"></el-button>-->
<!--                    </el-tooltip>-->
<!--                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">-->
<!--                        <el-button type="info" @click="editComment" circle icon="el-icon-edit"></el-button>-->
<!--                    </el-tooltip>-->
<!--                    <el-tooltip class="item" effect="dark" content="查看" placement="top">-->
<!--                        <el-button type="warning" @click="showComment" circle icon="el-icon-search"></el-button>-->
<!--                    </el-tooltip>-->
<!--                </div>-->
<!--            </div>-->
            <el-table
                    :data="commentsList"
                    stripe
                    :show-overflow-tooltip=true
                    :header-cell-style="tableHeader"
                    ref="multipleTable"
                    tooltip-effect="dark"
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="createDatetime"
                        label="创建时间"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="parkingId"
                        label="车库名称"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="content"
                        label="评论内容"
                        min-width="200">
                </el-table-column>
                <el-table-column
                        label="用户打分"
                        width="200">
                    <template slot-scope="scope">
                        <el-rate v-model="scope.row.score" :disabled="true"></el-rate>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="userId"
                        label="用户名称"
                        min-width="120">
                </el-table-column>
                <el-table-column
                        prop="replay"
                        label="回复内容"
                        min-width="300">
                </el-table-column>
                <el-table-column
                        label="点赞数"
                        width="120">
                    <template slot-scope="scope">
                        <img src="../../assets/like_normal.png" width="50px" height="50px"/>
                        <span>{{scope.row.like}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="反对数"
                        width="120">
                    <template slot-scope="scope">
                        <img src="../../assets/dislike_normal.png" width="50px" height="50px"/>
                        <span>{{scope.row.dislike}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    style="margin-top: 10px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="1"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    import Message from '../../components/messages/index'
    export default {
        data(){
            return{
                tableHeader:{
                    "background-color":"#7fa1be99",
                    "color":"white",
                    "font-size":"18px"
                },
                commentsList:[
                    {
                        content:"这车库相当不错",
                        score:3,
                        createDatetime:'2017-9-10',
                        replay:"老铁，常来",
                        userId:2,
                        parkingId:3,
                        like:80,
                        dislike:100
                    },
                    {
                        content:"这车库相当不错",
                        createDatetime:'2017-9-10',
                        score:3,
                        replay:"老铁，常来",
                        userId:2,
                        parkingId:3,
                        like:80,
                        dislike:100
                    },
                    {
                        content:"这车库相当不错",
                        createDatetime:'2017-9-10',
                        score:3,
                        replay:"老铁，常来",
                        userId:2,
                        parkingId:3,
                        like:80,
                        dislike:100
                    }
                ],
                commentsData:{},
                selectList:[],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value1: '',
                value2: ''
            }
        },
        methods:{
            handleSelectionChange(val){
                this.selectList = [];
                val.forEach(v =>{
                    this.selectList.push(v.id);
                });
            },
            handleCurrentChange(){

            },
            handleSizeChange(){

            },
            replayComment(){
                if (!this.selectList.length > 0){
                    Message.warning("至少需要选择一项!")
                }
            },
            addComment(){
            },
            deleteComment(){
                if (!this.selectList.length > 0){
                    Message.warning("至少需要选择一项!")
                }
            },
            editComment(){
                if (this.selectList.length === 0){
                    Message.warning("至少需要选择一项!")
                }else if (this.selectList.length > 1){
                    Message.warning("只能选择一项!")
                }
            },
            showComment(){
                if (this.selectList.length === 0){
                    Message.warning("至少需要选择一项!")
                }else if (this.selectList.length > 1){
                    Message.warning("只能选择一项!")
                }
            }


        }
    }
</script>

<style scoped lang="less">
    .new{
        width: 100%;
        height: calc(~'100vh - 100px');
    }
</style>
